<template>
  <div class="components-discount-add-or-update">
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      label-width="140px"
      style="width: 700px"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <el-form-item
        :label="$t('group.actName')"
        prop="discountName"
        :rules="[{ required: true, message: $t('publics.noNull') }]"
      >
        <el-input
          v-model.trim="dataForm.discountName"
          maxlength="50"
          show-word-limit
          :placeholder="$t('group.actName')"
        />
      </el-form-item>
      <el-form-item
        label=""
        prop="mobilePic"
      >
        <div class="custom-label">
          <div class="require-icon">
            {{ $t('marketing.mobiltyDiagram') }}
          </div>
          <div>（710*260）</div>
        </div>
        <div class="mobile-pic-box">
          <img-upload v-model="dataForm.mobilePic" />
          <span
            v-if="!dataForm.mobilePic && submitFlag"
            class="require-item-error"
          >{{
            $t('publics.noNull')
          }}</span>
          <div v-else>
            {{ $t('marketing.suggest1') }}
          </div>
        </div>
      </el-form-item>
      <el-form-item
        label=""
        prop="pcPic"
      >
        <div class="custom-label">
          <div class="require-icon">
            {{ $t('marketing.pcActivityListChart') }}
          </div>
          <div>（590*240）</div>
        </div>
        <img-upload v-model="dataForm.pcPic" />
        <span
          v-if="!dataForm.pcPic && submitFlag"
          class="require-item-error"
        >{{
          $t('publics.noNull')
        }}</span>
      </el-form-item>
      <el-form-item
        label=""
        prop="pcBackgroundPic"
      >
        <div class="custom-label">
          <div class="require-icon">
            {{ $t('marketing.pcActiviroundMap') }}
          </div>
          <div>（1200*360）</div>
        </div>
        <img-upload v-model="dataForm.pcBackgroundPic" />
        <span
          v-if="!dataForm.pcBackgroundPic && submitFlag"
          class="require-item-error"
        >{{
          $t('publics.noNull')
        }}</span>
      </el-form-item>
      <el-form-item
        :label="$t('marketing.activTime')"
        style="width: 750px"
      >
        <div class="date-picker">
          <el-form-item prop="startTime">
            <el-date-picker
              v-model="dataForm.startTime"
              type="date"
              :placeholder="$t('live.chooseStartDate')"
              value-format="YYYY-MM-DD"
              style="width: 156px"
            />
            <el-time-select
              v-model="startTimeValue"
              start="00:00"
              step="00:30"
              end="23:30"
              style="width: 111px"
              :class="{'time-select': true, 'time-select-clear': !!startTimeValue}"
              :placeholder="$t('user.startDate')"
            />
          </el-form-item>
          <span style="margin: 0 10px">-</span>
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="dataForm.endTime"
              type="date"
              :placeholder="$t('live.chooseEndDate')"
              value-format="YYYY-MM-DD"
              style="width: 156px"
            />
            <el-time-select
              v-model="endTimeValue"
              start="00:00"
              step="00:30"
              end="23:30"
              style="width: 111px"
              :class="{'time-select': true, 'time-select-clear': !!endTimeValue}"
              :placeholder="$t('user.endDate')"
            />
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item
        :label="$t('marketing.typeOfActivity')"
        prop="discountRule"
      >
        <el-radio-group
          v-model="dataForm.discountRule"
          :disabled="!!dataForm.discountId"
          @change="changeDiscountRule"
        >
          <el-radio :label="0">
            {{ $t('marketing.fullMoneoney') }}
          </el-radio>
          <!-- <el-radio :label="1">满件减钱</el-radio> -->
          <el-radio :label="2">
            {{ $t('marketing.fullMoneyDiscount') }}
          </el-radio>
          <el-radio :label="3">
            {{ $t('marketing.fullDiscount') }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="dataForm.discountRule === 0 || dataForm.discountRule === 1"
        :label="$t('marketing.typeOfExemption')"
        prop="discountType"
      >
        <el-radio-group
          v-model="dataForm.discountType"
          @change="discountTypeChange"
        >
          <el-radio :label="0">
            {{ $t('marketing.decreaseOestLevel') }}
          </el-radio>
          <el-radio :label="1">
            {{ $t('marketing.decreaeryTime') }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 卡片 -->
      <el-form-item :label="$t('marketing.offerContent')">
        <el-card
          v-for="(discountItem, index) in dataForm.discountItems"
          :key="discountItem.discountItemId"
          class="box-card"
        >
          <template #header>
            <div
              v-if="!dataForm.discountType"
              class="clearfix"
            >
              <span>{{ $t('marketing.activityLevel') }} {{ index + 1 }}</span>
              <div
                v-if="dataForm.discountItems.length > 1"
                style="float: right; padding: 3px 0"
                class="default-btn text-btn"
                @click="deleteActivityClass(index)"
              >
                {{ $t('text.delBtn') }}
              </div>
            </div>
          </template>
          <el-form-item
            class="text item"
            :label="$t('marketing.conditionsOfUse')"
            style="margin-bottom: 20px"
            :rules="[{ required: true, message: $t('publics.noNull') }]"
          >
            <div>
              <el-input
                v-model="discountItem.needAmount"
                type="number"
                style="width: 200px"
                @change="checkNumber(index, 1)"
              >
                <template #prepend>
                  {{
                    dataForm.discountType === 1 ? $t('marketing.everyFull') : $t('marketing.full')
                  }}
                </template>
                <template #append>
                  {{ discountItemTexts[0] }}
                </template>
              </el-input>
              <span style="color: #c0c4cc; display: block">
                {{ $t('live.pleaseEnteThan0') }}
                <el-tooltip
                  v-if="dataForm.discountType === 0"
                  class="item"
                  effect="light"
                  placement="top"
                >
                  <template #content><div>{{ $t('marketing.conditionsOfUseIn') }}</div>
                  </template>
                  <el-icon class="question">
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
              </span>
            </div>
          </el-form-item>
          <el-form-item
            class="text item"
            :label="$t('marketing.discountedPrice')"
            :rules="[{ required: true, message: $t('publics.noNull') }]"
          >
            <div>
              <el-input
                v-model="discountItem.discount"
                type="number"
                style="width: 200px"
                @change="checkNumber(index, 2)"
              >
                <template #prepend>
                  {{
                    dataForm.discountRule < 2 ? $t('marketing.reducea') : $t('marketing.dozen')
                  }}
                </template>
                <template #append>
                  {{ discountItemTexts[1] }}
                </template>
              </el-input>
              <div
                class="default-btn text-btn disabled-btn"
                style="display: block"
              >
                {{
                  dataForm.discountRule < 2
                    ? $t('marketing.pleaseThan0')
                    : $t('marketing.pleaseEnterTheNumber010')
                }}
              </div>
            </div>
          </el-form-item>
        </el-card>
      </el-form-item>
      <!-- 卡片 -->
      <el-form-item
        v-if="dataForm.discountRule >= 2 || dataForm.discountType !== 0"
        :label="$t('marketing.maximumDiscountAmount')"
        prop="maxReduceAmount"
        :rules="[{ required: true, message: $t('publics.noNull') }]"
      >
        <el-input
          v-model="dataForm.maxReduceAmount"
          type="number"
          :min="1"
          :max="9999999999999"
          oninput="value=value.replace(/\D/g, '')"
          :placeholder="$t('marketing.maximumDiscountAmount')"
          @change="maxReduceAmountChange"
        />
      </el-form-item>
      <el-form-item v-if="!dataForm.discountType">
        <div
          v-if="!dataForm.discountType"
          class="default-btn"
          @click="addActivityClass()"
        >
          {{ $t('marketing.addActivity') }}
        </div>
      </el-form-item>
      <el-form-item
        :label="$t('marketing.applicableProductType')"
        prop="suitableProdType"
        :rules="[{ required: true, message: $t('publics.noNull') }]"
      >
        <el-radio-group
          v-model="dataForm.suitableProdType"
          :class="$t('language') === 'English' ? 'radio-group' : ''"
          @change="changeDiscountRule"
        >
          <el-radio :label="0">
            {{ $t('marketing.allProdsPar') }}
          </el-radio>
          <el-radio :label="1">
            {{ $t('marketing.participateInD') }}
          </el-radio>
          <el-radio
            :label="2"
            :style="$t('language') === 'English' ? 'marginTop:13px' : ''"
          >
            {{
              $t('marketing.specifiedProduct')
            }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="dataForm.suitableProdType !== 0 && dataForm.discountProds.length > 0"
        style="width: 75vw"
      >
        <el-card
          v-for="(discountProd, index) in dataForm.discountProds"
          :key="index"
          :body-style="{ padding: '0px' }"
          style="height: 160px; width: 120px; float: left; margin-right: 2%; margin-bottom: 1%"
        >
          <prod-pic
            height="104px"
            width="100%"
            :pic="discountProd.pic"
          />
          <div class="card-prod-info-btn">
            <div class="prod-name">
              {{ discountProd.prodName }}
            </div>
            <div class="del-btn">
              <span @click="deleteProd(index)">{{ $t('text.delBtn') }}</span>
            </div>
          </div>
        </el-card>
      </el-form-item>
      <el-form-item v-if="dataForm.suitableProdType === 1 || dataForm.suitableProdType === 2">
        <div
          v-if="dataForm.suitableProdType === 1 || dataForm.suitableProdType === 2"
          class="default-btn"
          :style="$t('language') === 'English' ? 'width:120px' : ''"
          @click="prodsSelectHandle()"
        >
          {{ $t('product.select') }}
        </div>
      </el-form-item>
      <!-- 商品 -->
      <el-form-item
        :label="$t('product.status')"
        prop="status"
      >
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="1">
            {{ $t('groups.turnOn') }}
          </el-radio>
          <el-radio :label="0">
            {{ $t('station.close') }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <div
        class="default-btn"
        @click="closeTag()"
      >
        {{ $t('crud.filter.cancelBtn') }}
      </div>
      <div
        class="default-btn primary-btn"
        @click="onSubmit()"
      >
        {{ $t('crud.filter.submitBtn') }}
      </div>
    </div>
    <!-- 商品选择弹窗-->
    <ProdsSelect
      v-if="prodsSelectVisible"
      ref="prodsSelectRef"
      @refresh-select-prods="selectDiscountProds"
    />
  </div>
</template>

<script setup>
import ProdsSelect from '@/components/prods-select/index.vue'
import ImgUpload from '@/components/img-upload/index.vue'
import ProdPic from '@/components/prod-pic/index.vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { getDateTimeRange, getParseTime } from '@/utils/datetime'

const route = useRoute()
const router = useRouter()

const dataForm = ref({
  discountId: 0,
  discountName: '',
  mobilePic: '',
  pcPic: '',
  pcBackgroundPic: '',
  discountRule: 0,
  discountType: 0,
  suitableProdType: 0,
  maxReduceAmount: 1,
  shopId: '',
  startTime: '',
  endTime: '',
  status: 1,
  discountItems: [],
  discountProds: []
})

const isSubmit = ref(false)
const prodsSelectVisible = ref(false)
const isTrue = ref(false)
let submitFlag = null // 提交触发

const startTimeValue = ref('')
const endTimeValue = ref('')
const dataFormRef = ref(null)
// eslint-disable-next-line no-unused-vars
const validateStartTime = (rule, value, callback) => {
  if (!startTimeValue.value || !dataForm.value.startTime) {
    callback(new Error($t('groups.startTimeCannotBeEmpty')))
  }
  const startTime = dataForm.value.startTime + ' ' + startTimeValue.value + ':00'
  const endTime = dataForm.value.endTime + ' ' + endTimeValue.value + ':00'
  if (Date.parse(startTime) >= Date.parse(endTime)) {
    callback(new Error($t('groups.startTimeIsTooSmall')))
  } else {
    callback()
  }
}
const prodsSelectRef = ref(null)
// eslint-disable-next-line no-unused-vars
const validateEndTime = (rule, value, callback) => {
  if (!endTimeValue.value || !dataForm.value.endTime) {
    callback(new Error($t('groups.endTimeCannotBeEmpty')))
  }
  const startTime = dataForm.value.startTime + ' ' + startTimeValue.value + ':00'
  const endTime = dataForm.value.endTime + ' ' + endTimeValue.value + ':00'
  if (Date.parse(startTime) >= Date.parse(endTime)) {
    callback(new Error($t('groups.endTimeIsTooSmall')))
  }
  if (rule.field === 'endTime' && new Date() > Date.parse(endTime)) {
    callback(new Error($t('groups.endTime')))
  } else if (
    dataForm.value.status === 1 &&
    dataForm.value.groupActivityId
    // && Date.parse(validEndTime) > Date.parse(endTime)
  ) {
    callback(new Error($t('groups.extendedEndTime')))
  } else {
    callback()
  }
}
const dataRule = reactive({
  mobilePic: [{ required: true, message: $t('marketing.pleaseUploadAPicture'), trigger: 'blur' }],
  pcPic: [{ required: true, message: $t('marketing.pleaseUploadAPicture'), trigger: 'blur' }],
  pcBackgroundPic: [
    { required: true, message: $t('marketing.pleaseUploadAPicture'), trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: $t('groups.startTimeCannotBeEmpty'), trigger: 'blur' },
    { validator: validateStartTime, trigger: 'blur' }
  ],
  endTime: [
    { required: true, message: $t('groups.endTimeCannotBeEmpty'), trigger: 'blur' },
    { validator: validateEndTime, trigger: 'blur' }
  ]
})

watch(
  () => dataForm.value.discountRule,
  val => {
    if (val === 2 || val === 3) {
      dataForm.value.discountType = 0
    }
  }
)

const discountItemTexts = computed(() => {
  const texts = []
  if (dataForm.value.discountRule === 0 || dataForm.value.discountRule === 2) {
    texts[0] = $t('admin.dollar')
  } else {
    texts[0] = $t('marketing.item')
  }
  if (dataForm.value.discountRule === 0 || dataForm.value.discountRule === 1) {
    texts[1] = $t('admin.dollar')
  } else {
    texts[1] = $t('marketing.fold')
  }
  return texts
})

const getDataList = () => {
  nextTick(() => {
    dataFormRef.value?.resetFields()
    dataForm.value.discountItems = [{ needAmount: 1, discount: 0.01 }]
    const datetimeRange = getDateTimeRange()
    dataForm.value.startTime = datetimeRange.startTime
    dataForm.value.endTime = datetimeRange.endTime
    startTimeValue.value = datetimeRange.currentTime
    endTimeValue.value = datetimeRange.currentTime
  })
  if (dataForm.value.discountId) {
    http({
      url: http.adornUrl(`/admin/discount/info/${dataForm.value.discountId}`),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      dataForm.value = reactive(data)
      startTimeValue.value = dataForm.value.startTime ? dataForm.value.startTime.substring(11, dataForm.value.startTime.length - 3) : ''
      endTimeValue.value = dataForm.value.endTime ? dataForm.value.endTime.substring(11, dataForm.value.endTime.length - 3) : ''
      dataForm.value.startTime = getParseTime(dataForm.value.startTime, '{y}-{m}-{d}')
      dataForm.value.endTime = getParseTime(dataForm.value.endTime, '{y}-{m}-{d}')
    })
  }
}
onMounted(() => {
  if (route.query.discountId !== undefined) {
    dataForm.value.discountId = route.query.discountId
  }
  isSubmit.value = false
  getDataList()
})

/**
 * 活动类型变化时，更新优惠内容的值
 */
const changeDiscountRule = () => {
  for (let i = 0; i < dataForm.value.discountItems.length; i++) {
    checkNumber(i, 1)
    checkNumber(i, 2)
  }
}
/**
 * 输入框的数据改变时，对值进行校验
 */
const checkNumber = (index, type) => {
  const discountItem = dataForm.value.discountItems[index]
  if (type === 1) {
    if (discountItem.needAmount < 1) {
      discountItem.needAmount = 1
    }
    if (discountItem.needAmount > 9999999) {
      discountItem.needAmount = 9999999
    }
    discountItem.needAmount = Math.round(discountItem.needAmount)
  }
  if (type === 2) {
    // 如果小于最小值
    if (discountItem.discount > 9999999.99) {
      discountItem.discount = 9999999.99
    }
    if (discountItem.discount < 0.01 && dataForm.value.discountRule < 2) {
      discountItem.discount = 0.01
    }
    if (discountItem.discount < 0.1 && dataForm.value.discountRule >= 2) {
      discountItem.discount = 0.1
    }
    if (discountItem.discount >= 10 && dataForm.value.discountRule >= 2) {
      // 如果折扣大于10
      discountItem.discount = 9.9
    } else if (dataForm.value.discountRule < 2) {
      // 优惠金额保留两位小数
      discountItem.discount = parseFloat(discountItem.discount).toFixed(2)
    } else {
      // 保留一位小数
      discountItem.discount = parseFloat(discountItem.discount).toFixed(1)
      discountItem.discount = discountItem.discount >= 10 ? 9.9 : discountItem.discount
    }
  }
}
/**
 * 优惠金额上限校验
 */
const maxReduceAmountChange = () => {
  const maxReduceAmount = Math.round(dataForm.value.maxReduceAmount)
  dataForm.value.maxReduceAmount =
    maxReduceAmount < 1 ? 1 : maxReduceAmount > 9999999999999 ? 9999999999999 : maxReduceAmount
}
/**
 * 减免类型选择时，更新数据
 */
const discountTypeChange = () => {
  dataForm.value.discountItems = [dataForm.value.discountItems[0]]
}
// 添加活动层级
const addActivityClass = () => {
  dataForm.value.discountItems.push({})
}
// 删除活动层级
const deleteActivityClass = index => {
  dataForm.value.discountItems.splice(index, 1)
}
// 删除指定商品
const deleteProd = index => {
  dataForm.value.discountProds.splice(index, 1)
}
// 显示添加指定商品弹框
const prodsSelectHandle = () => {
  prodsSelectVisible.value = true
  nextTick(() => {
    prodsSelectRef.value.init(dataForm.value?.discountProds)
  })
}
// 添加指定商品
const selectDiscountProds = prods => {
  prodsSelectVisible.value = false
  if (prods) {
    const idList =
      dataForm.value.discountProds.length > 0 ? dataForm.value.discountProds.map(item => {
        return item.prodId
      }) : []
    prods.forEach(item => {
      if (idList.indexOf(item.prodId) < 0) {
        dataForm.value.discountProds.push(item)
      }
    })
  }
}
// 关闭当前标签页
const closeTag = () => {
  router.go(-1)
}
/**
 * 错误提示框
 */
const errorMsg = message => {
  ElMessage({
    message,
    type: 'error',
    duration: 1500
  })
}
/**
 * 校验优惠内容是否正确
 */
let errorValue = false
const checkDiscountItems = () => {
  isTrue.value = false
  let minAmount = dataForm.value.discountItems[0].discount
  let maxAmount = dataForm.value.discountItems[0].discount
  let amount = 0
  let prevDiscount = 0
  let index = 1
  dataForm.value.discountItems.forEach(item => {
    if (dataForm.value.discountType === 0 && item.needAmount <= amount) {
      isTrue.value = true
      errorValue = $t('marketing.activityLevel') + index + $t('marketing.theConditierThan') + amount
      return true
    }
    // 限制层级高的优惠金额不得低于层级低的优惠金额
    if (
      dataForm.value.discountType === 0 &&
      dataForm.value.discountRule === 0 &&
      Number(item.discount) <= Number(prevDiscount)
    ) {
      isTrue.value = true
      errorValue = $t('marketing.activityLevel') + index + $t('marketing.theOfferAmountThan') + prevDiscount
      return true
    }
    // 限制层级高的优惠折扣不得低于层级低的优惠折扣(折扣越低优惠金额越大)
    if (
      dataForm.value.discountType === 0 &&
      dataForm.value.discountRule !== 0 &&
      Number(item.discount) >= Number(prevDiscount) &&
      Number(prevDiscount) !== 0
    ) {
      isTrue.value = true
      errorValue = $t('marketing.activityLevel') + index + $t('marketing.theOfferDiscountThan') + prevDiscount
      return true
    }
    amount = item.needAmount
    prevDiscount = item.discount
    index = index + 1
    if (dataForm.value.discountRule === 0) {
      if (item.needAmount <= item.discount) {
        isTrue.value = true
        errorValue = $t('marketing.activimount')
        return true
      }
    }
    if (!item.needAmount) {
      isTrue.value = true
      errorValue = $t('marketing.activitytBeEmpty')
      return true
    }
    if (!item.discount) {
      isTrue.value = true
      errorValue = $t('marketing.promotioBeEmpty')
      return true
    }
    minAmount = item.discount < minAmount ? item.discount : minAmount
    maxAmount = item.discount > maxAmount ? item.discount : maxAmount
  })
  // 活动类型：满钱减钱 => 减免类型：按满足最高层减一次 => 优惠金额上限为最大金额
  if (dataForm.value.discountRule === 0 && dataForm.value.discountType === 0) {
    dataForm.value.maxReduceAmount = maxAmount
  }
  if (dataForm.value.discountRule < 2 && dataForm.value.discountType === 0) {
    dataForm.value.maxReduceAmount = maxAmount
  } else if (dataForm.value.discountRule < 2 && dataForm.value.discountType === 1) {
    if (dataForm.value.maxReduceAmount < minAmount) {
      isTrue.value = true
      errorValue = $t('marketing.maximumDiscountAmountBig')
      return true
    }
  }
  if (dataForm.value.suitableProdType !== 0 && dataForm.value.discountProds.length < 1) {
    isTrue.value = true
    errorValue = $t('marketing.pleaseSelectAProduct')
    return true
  }
}
// 表单提交
const onSubmit = () => {
  checkDiscountItems()
  if (isTrue.value) {
    errorMsg(errorValue)
    return
  }
  dataFormRef.value.validate(valid => {
    if (valid) {
      const startDate =
        dataForm.value.startTime && startTimeValue ? dataForm.value.startTime + ' ' + startTimeValue.value + ':00' : ''
      const endDate =
        dataForm.value.endTime && endTimeValue ? dataForm.value.endTime + ' ' + endTimeValue.value + ':00' : ''
      submitFlag = true
      if (!dataForm.value.mobilePic || !dataForm.value.pcBackgroundPic || !dataForm.value.pcPic) {
        return
      }
      if (endDate < startDate) {
        errorMsg($t('marketing.eventEndanStartTime'))
        return
      }
      if (isSubmit.value) {
        return false
      }
      if (
        dataForm.value.discountItems[0].discount === 0.0 ||
        dataForm.value.discountItems[0].discount === 0
      ) {
        ElMessage.error($t('discount.discountNoZero'))
        return
      }
      const startTime = dataForm.value.startTime
      const endTime = dataForm.value.endTime
      dataForm.value.startTime = startDate
      dataForm.value.endTime = endDate
      isSubmit.value = true
      http({
        url: http.adornUrl('/admin/discount'),
        method: dataForm.value.discountId ? 'put' : 'post',
        data: http.adornData({
          discountId: dataForm.value.discountId || undefined,
          shopId: dataForm.value.shopId,
          discountName: dataForm.value.discountName,
          mobilePic: dataForm.value.mobilePic,
          pcBackgroundPic: dataForm.value.pcBackgroundPic,
          pcPic: dataForm.value.pcPic,
          discountRule: dataForm.value.discountRule,
          discountType: dataForm.value.discountType,
          suitableProdType: dataForm.value.suitableProdType,
          maxReduceAmount: dataForm.value.maxReduceAmount,
          startTime: dataForm.value.startTime,
          endTime: dataForm.value.endTime,
          status: dataForm.value.status,
          discountItems: dataForm.value.discountItems,
          discountProds: dataForm.value.discountProds
        })
      }).then(() => {
        ElMessage({
          message: $t('publics.operation'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            router.go(-1)
          }
        })
      }).catch(() => {
        isSubmit.value = false
      })
      dataForm.value.startTime = startTime
      dataForm.value.endTime = endTime
    }
  })
}
</script>
<style lang="scss" scoped>
.components-discount-add-or-update{
  :deep(.time-select.el-select ){
    .el-input .el-select__caret.el-icon{
      display: none;
    }
    &.time-select-clear:hover .el-input .el-select__caret.el-icon{
      display: flex;
    }
  }
  .custom-label{
    width: 140px;
    text-align: right;
    position: absolute;
    left: -152px;
    top: 0;
    color: #606266;
    .require-icon{
      position: relative;
      &::before{
        content: "*";
        color: var(--el-color-danger);
        margin-right: 4px;
      }
    }
  }
  .dialog-footer{
    margin-left: 140px;
  }
}

:deep(.el-input__inner) {
  border: none !important;
  padding-left: 0 !important;
}
.mobile-pic-box {
  display: flex;
  flex-direction: column;
}
:deep(.el-form-item__label) {
  height: auto;
}
.require-item-error {
  color: #f56c6c;
}
.date-picker {
  display: flex;
}

</style>
